import { useEffect, } from "react"
import { AddSquareOutline, } from 'antd-mobile-icons'
import './Address.scss'
import { useDispatch, useSelector } from "react-redux"
import type { AppDispatch, RootState } from "../../../store"
import { type addressItem } from "../../../api/address"
import { Toast } from "antd-mobile"
import { useNavigate } from "react-router-dom"

import { checkedAddress, getAddress, initAddressError } from "../../../store/modules/address"
import { Loading } from "../../../layouts/MainLayout/components/loading"
import { addOrderSubAddress } from "../../../store/modules/orderSubmit"
type Address = {
    userName: string,
    phone: string,
    address: string,
    _id: string
}
export const Address = () => {
    const navigate = useNavigate()
    const dispatch = useDispatch<AppDispatch>()

    const { addressList, error, loading } = useSelector((state: RootState) => {
        return state.address
    })
    useEffect(() => {
        dispatch(getAddress())

    }, [dispatch])
    //选择订单地址
    const checkAddress = (item: addressItem) => {
        console.log(item)
        dispatch(addOrderSubAddress(item))
        dispatch(checkedAddress(item))
        navigate(-1)
    }
    useEffect(() => {
        if (error) {
            Toast.show(error + '')
            dispatch(initAddressError())
            setTimeout(() => {
                navigate('/login')
            }, 1000);
            
        }
    }, [error, dispatch,navigate])

    if (loading) {
        return <Loading />
    }

    if (!addressList) {
        return <>error</>
    }
    return <div className="address">
        <div className="isAddress" onClick={() => navigate('/addaddress')}>
            <AddSquareOutline fontSize={40} />
        </div>

        {
            addressList.map((item) => (
                <div className='addressInfo' key={item._id} onClick={() => checkAddress(item)}>
                    <div className='address_icon'>
                        <div>
                            <div className='name_phone'>
                                <div>{item.name}</div>
                                <div>{item.mobile}</div>
                            </div>
                            <div className='userAddress'>{item.address}</div>
                        </div>
                        {/* <RightOutline fontSize={18} color='var(--adm-color-primary)' /> */}

                    </div>
                </div>))
        }

    </div>
}